<!--<div class="bt-search">-->
<!--  <div class="bt-box">-->
<!--    <button nz-button nz-button-add nzType="primary" (click)="showModal()">新增</button>-->
<!--  </div>-->
<!--</div>-->
<nz-row class="header">
  <button nz-button nzType="primary" (click)="showModal()" *ngIf="permission.userPermission.has('system:menu:add')">新增</button>
  <span>模块：</span>
  <nz-radio-group [(ngModel)]="module" nzButtonStyle="solid" (ngModelChange)="moduleChange()" class="moduleRadioGroup">
    <label nz-radio-button [nzValue]="m.id" *ngFor="let m of menuList">{{m.name}}</label>
  </nz-radio-group>
</nz-row>
<!--<main>-->
<!--    <div class="hd">-->
<!--        <ul>-->
<!--            <li>菜单名称</li>-->
<!--            <li>图标</li>-->
<!--            <li>排序</li>-->
<!--            <li>请求地址</li>-->
<!--            <li>类型</li>-->
<!--            <li>可见</li>-->
<!--            <li>权限表示</li>-->
<!--            <li>备注</li>-->
<!--            <li>操作</li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    <nz-tree [nzData]="listOfData" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>-->
<!--    <ng-template #nzTreeTemplate let-node let-origin="origin">-->
<!--        <span class="custom-node">-->
<!--            <span *ngIf="!node.isLeaf">-->
<!--                &lt;!&ndash; 菜单名称 &ndash;&gt;-->
<!--                <span class="node-icon"><i nz-icon-->
<!--                        [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i>{{ origin.name }}</span>-->
<!--                <div class="text-box">-->
<!--                    &lt;!&ndash; 图标 &ndash;&gt;-->
<!--                    <span class="node-class node-PId">{{origin.icon ? origin.icon : '-'}}</span>-->
<!--                    &lt;!&ndash; 排序 &ndash;&gt;-->
<!--                    <span class="node-class node-url">{{origin.sort ? origin.sort : '-'}}</span>-->
<!--                    &lt;!&ndash; 请求地址 &ndash;&gt;-->
<!--                    <span class="node-class node-sort">{{origin.path ? origin.path : '-'}}</span>-->
<!--                    &lt;!&ndash; 类型 &ndash;&gt;-->
<!--                    <span class="node-class node-status">{{origin.type ? origin.type : '-'}}</span>-->
<!--                    &lt;!&ndash; 可见 &ndash;&gt;-->
<!--                    <span class="node-class node-createTime">{{origin.isHide == 1? '显示' : '隐藏' }}</span>-->
<!--                    &lt;!&ndash; 权限表示 &ndash;&gt;-->
<!--                    <span class="node-class node-createTime">{{origin.keyword ? origin.keyword : '-'}}</span>-->
<!--                    &lt;!&ndash; 备注 &ndash;&gt;-->
<!--                    <span class="node-class node-createTime">{{origin.remarks ? origin.remarks : '-'}}</span>-->
<!--                    <div class="node-class">-->
<!--                        <a nz-button nz-button-tdlink nzType="link" (click)="showModal(origin.id)">编辑</a>-->
<!--                        <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?"-->
<!--                            [nzIcon]="iconTpl" (nzOnConfirm)="confirm(origin)">删除</a>-->
<!--                        <ng-template #iconTpl>-->
<!--                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>-->
<!--                        </ng-template>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </span>-->
<!--            <span *ngIf="node.isLeaf">-->
<!--                <span class="node-icon"><i nz-icon nzType="file"></i>{{ origin.name }}</span>-->
<!--                <div class="text-box">-->
<!--                    &lt;!&ndash; 图标 &ndash;&gt;-->
<!--                    <span class="node-class node-PId">{{origin.icon ? origin.icon : '-'}}</span>-->
<!--                    &lt;!&ndash; 排序 &ndash;&gt;-->
<!--                    <span class="node-class node-url">{{origin.sort ? origin.sort : '-'}}</span>-->
<!--                    &lt;!&ndash; 请求地址 &ndash;&gt;-->
<!--                    <span class="node-class node-sort">{{origin.path ? origin.path : '-'}}</span>-->
<!--                    &lt;!&ndash; 类型 &ndash;&gt;-->
<!--                    <span class="node-class node-status">{{origin.type ? origin.type : '-'}}</span>-->
<!--                    &lt;!&ndash; 可见 &ndash;&gt;-->
<!--                    <span class="node-class node-createTime">{{origin.isHide == 1? '显示' : '隐藏' }}</span>-->
<!--                    &lt;!&ndash; 权限表示 &ndash;&gt;-->
<!--                    <span class="node-class node-createTime">{{origin.keyword ? origin.keyword : '-'}}</span>-->
<!--                    &lt;!&ndash; 备注 &ndash;&gt;-->
<!--                    <span class="node-class node-createTime">{{origin.remarks ? origin.remarks : '-'}}</span>-->
<!--                    <div class="node-class">-->
<!--                        <a nz-button nz-button-tdlink nzType="link" (click)="showModal(origin.id)">编辑</a>-->
<!--                        <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?"-->
<!--                            [nzIcon]="iconTpl" (nzOnConfirm)="confirm(origin)">删除</a>-->
<!--                        <ng-template #iconTpl>-->
<!--                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>-->
<!--                        </ng-template>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </span>-->
<!--        </span>-->
<!--    </ng-template>-->
<!--</main>-->

<nz-table #expandTable [nzData]="tableData" [nzShowPagination]="false" nzTableLayout="fixed" [nzPageSize]="999">
  <thead>
  <tr>
    <th>菜单名称</th>
    <th nzAlign="center" nzWidth="80px">图标</th>
    <th nzAlign="center" nzWidth="80px">排序</th>
    <th nzAlign="center" nzWidth="80px">类型</th>
    <th nzAlign="center" nzWidth="80px">可见性</th>
    <th nzAlign="center">路由地址</th>
    <th nzAlign="center">权限标识</th>
    <th nzAlign="center">备注</th>
    <th nzAlign="center" nzWidth="205px">操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of expandTable.data">
    <ng-container *ngFor="let item of mapOfExpandedData[data['key']]">
      <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
        <td
          [nzIndentSize]="item.level! * 20"
          [nzShowExpand]="!!item.children"
          [(nzExpand)]="item.expand"
          (nzExpandChange)="collapse(mapOfExpandedData[data['key']], item, $event)"
        >
          {{ item.name }}
        </td>
        <td nzAlign="center"><i nz-icon style="font-size: 24px" [nzType]="item.icon" nzTheme="outline"></i></td>
        <td nzAlign="center">{{item.sort}}</td>
        <td nzAlign="center">
          <nz-tag
            [nzColor]="item.type === 1 ? 'purple' : item.type === 2 ? '#67C23A' : item.type === 3 ? '#409EFF' : '#409EFF'">{{item.type === 1 ? '目录' : item.type === 2 ? '菜单' : item.type === 3 ? '按钮' : '未知'}}</nz-tag>
        </td>
        <td nzAlign="center"
            [ngStyle]="{color: item.isHide*1 === 1 ? '#67C23A' : '#F56C6C'}">{{item.isHide == 1 ? '显示' : '隐藏' }}</td>
        <td nzAlign="center">{{item.path || '无'}}</td>
        <td nzAlign="center">{{item.keyword}}</td>
        <td nzAlign="center">{{item.remark}}</td>
        <td nzAlign="center">
          <button style="margin-right: 4px" nz-button nzType="primary" nzSize="small" (click)="addChildren(item)"
                  *ngIf="item.type*1 !== 3&&permission.userPermission.has('system:menu:add')">新增子项
          </button>
          <button style="margin-right: 4px" nz-button nzType="primary" nzSize="small" (click)="showModal(item,false)" *ngIf="permission.userPermission.has('system:menu:edit')">
            编辑
          </button>
          <button style="margin-right: 4px" nz-button nzDanger nzSize="small" *ngIf="permission.userPermission.has('system:menu:delete')"
                  nzPopconfirmPlacement="top"
                  nz-popconfirm
                  nzPopconfirmTitle="确认要删除该数据吗?"
                  nzOkText="确认"
                  nzCancelText="取消"
                  (nzOnConfirm)="deleteMenu(item.id)">删除
          </button>
        </td>
      </tr>
    </ng-container>
  </ng-container>
  </tbody>
</nz-table>

<nz-modal [(nzVisible)]="isVisible" nzTitle="菜单管理" (nzOnCancel)="handleCancel()" [nzFooter]="null">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="modalForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">上级菜单</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-tree-select style="width: 250px" [nzNodes]="treeSelectOptions" nzShowSearch nzPlaceHolder="请选择"
                          nzVirtualHeight="300px"
                          formControlName="cId" [nzDefaultExpandAll]="false">
          </nz-tree-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSpan]="4">名称</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请输入名称">
          <input nz-input formControlName="name" [maxLength]="20" placeholder="请输入名称" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSpan]="4">权限标识</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请输入权限标识">
          <input nz-input formControlName="keyword" [maxLength]="50" placeholder="请输入标识" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">路由地址</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <input nz-input formControlName="path" [maxLength]="100" placeholder="请输入路径" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSpan]="4">显示排序</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请输入序号">
          <input nz-input formControlName="sort" type="number" [maxLength]="20" placeholder="请输入排序" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">状态</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-radio-group formControlName="isHide">
            <label nz-radio nzValue="1">显示</label>
            <label nz-radio nzValue="0">隐藏</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">icon</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <input nz-input formControlName="icon" placeholder="请输入图标"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">类型</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-radio-group formControlName="type">
            <label nz-radio nzValue="1" *ngIf="typeAvailable.has('1')">目录</label>
            <label nz-radio nzValue="2" *ngIf="typeAvailable.has('2')">菜单</label>
            <label nz-radio nzValue="3" *ngIf="typeAvailable.has('3')">按钮</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">备注</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <textarea rows="4" nz-input [maxLength]="100" formControlName="remarks"></textarea>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="8" [nzOffset]="4">
          <button nz-button nzType="primary">保存</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
